<template>
    <div style="">
      <Header :left="true" leftText="返回" title="异常让步生产申请审核"></Header>
      <van-tabs
        type="card"
        :offset-top="80"
        :sticky="true"
        @change="tabChange"
        swipeable="true"
        style="top: 8px; font-size: 15px"
        color="#1c6c8d"
      >
        <!-- 未确认页面 -->
        <van-tab title="未审核" style="font-size: 15px">
          <div class="textScroll">
            <!-- 循环数据开始 -->
            <div
              v-for="(item, index) in itemsOne"
              :key="item.Id"
              style="position: relative"
            >
              <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                <span></span>
              </div>
              <div class="divStyle">
                <van-row
                  style="margin-left: 10px; margin-top: 10px"
                  v-show="false"
                >
                  <van-col span="6"><b>id:</b></van-col>
                  <van-col span="14">{{ item.Id }}</van-col>
                </van-row>
               
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>设备代码:</b></van-col>
                  <van-col span="14">{{ item.MachineID }}</van-col>
                </van-row>
    
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>班次:</b></van-col>
                  <van-col span="14">{{shiftMap[item.PShiftID]}}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>订单号:</b></van-col>
                  <van-col span="14">{{item.POrderID}}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>物料名称:</b></van-col>
                  <van-col span="14">{{ item.MaterialName }}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px;padding-bottom: 10px;">
                  <van-col span="6"><b>异常发生时间:</b></van-col>
                  <van-col span="14">{{ item.OccurDatetime }}</van-col>
                  <van-col span="2">
                    <van-button
                      color="#138087"
                      @click="toAudit(item)"
                      style="
                        width: 85px;
                        height: 40px;
                        font-size: 12px;
                        position: absolute;
                        left: 70%;
                      "
                      type="primary"
                      text="审核"
                    />
                  </van-col>
                </van-row>
                <van-row
                  style="
                    margin-left: 10px;
                    margin-top: 10px;
                    border-bottom: 2px solid rgba(82, 76, 76, 0.39);
                  "
                >
                  <van-col span="6"> </van-col>
                  <van-col span="3"> </van-col>
                  <van-col span="6"> </van-col>
                </van-row>
              </div>
            </div>
            <!-- 循环数据结束 -->
            <!-- <van-empty v-if="itemsOne == ''" image="search" description="暂无数据" /> -->
          </div>
        </van-tab>
        <!-- 已确认页面 -->
        <van-tab title="已审核">
          <div class="textScroll2">
            <!-- 循环数据开始 -->
            <div
              v-for="(item, index) in itemsTwo"
              :key="item.Id"
              style="position: relative"
            >
              <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                <span></span>
              </div>
              <div class="divStyle">
                <van-row
                  style="margin-left: 10px; margin-top: 10px"
                  v-show="false"
                >
                  <van-col span="6"><b>id:</b></van-col>
                  <van-col span="14">{{ item.Id }}</van-col>
                </van-row>
               
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>设备代码:</b></van-col>
                  <van-col span="14">{{ item.MachineID }}</van-col>
                </van-row>
    
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>班次:</b></van-col>
                  <van-col span="14">{{shiftMap[item.PShiftID]}}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>订单号:</b></van-col>
                  <van-col span="14">{{item.POrderID}}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="6"><b>物料名称:</b></van-col>
                  <van-col span="14">{{ item.MaterialName }}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px;padding-bottom: 10px;">
                  <van-col span="6"><b>异常发生时间:</b></van-col>
                  <van-col span="14">{{ item.OccurDatetime }}</van-col>
                  <van-col span="2">
                    <van-button
                      color="#138087"
                      @click="toAudit(item,true)"
                      style="
                        width: 85px;
                        height: 40px;
                        font-size: 12px;
                        position: absolute;
                        left: 70%;
                      "
                      type="primary"
                      text="查看"
                    />
                  </van-col>
                  </van-row>
                <van-row
                  style="
                    margin-left: 10px;
                    margin-top: 10px;
                    border-bottom: 2px solid rgba(82, 76, 76, 0.39);
                  "
                >
                  <van-col span="6"> </van-col>
                  <van-col span="3"> </van-col>
                  <van-col span="6"> </van-col>
                </van-row>
              </div>
              
            </div>
            <!-- 循环数据结束 -->
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </template>
    
  <script>
  import {
    Col,
    Row,
    Form,
    Cell,
    Icon,
    Field,
    tab,
    tabs,
    NumberKeyboard,
    Image as VanImage,
    Picker,
    popup,
    SubmitBar,
    Button,
    Loading,
    Overlay,
    Dialog,
    Toast,
    NoticeBar,
    Tag,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Cascader,
    Calendar,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    AddressList,
    Checkbox,
    CheckboxGroup,
  } from "vant";
  
  import "vue-easytable/libs/themes-base/index.css";
  import { VTable } from "vue-easytable";
  import { _httpClient } from "@/libs/apisie";
  import { _httpClient as _httpClientApi } from "@/libs/api";
  import { _httpClient as _httpClientApisie } from "@/libs/apisie";
  import { getToken, getBaseApiFrefix } from "@/libs/auth";
  import Header from "@/components/header.vue";
  import { storage } from "@/libs/utils";
  
  Vue.use(Form);
  Vue.use(Field);
  Vue.use(Overlay);
  Vue.use(Loading);
  Vue.use(Picker);
  Vue.use(popup);
  Vue.use(SubmitBar);
  Vue.use(VanImage);
  Vue.use(DatetimePicker);
  Vue.use(Cascader);
  Vue.use(Calendar);
  Vue.use(Cell);
  Vue.use(RadioGroup);
  Vue.use(Radio);
  Vue.use(Divider);
  Vue.use(Stepper);
  Vue.use(Button);
  Vue.use(AddressList);
  Vue.use(Checkbox);
  Vue.use(CheckboxGroup);
  Vue.use(Col);
  Vue.use(Row);
  Vue.use(tab);
  Vue.use(tabs);
  
  export default {
    name: "abnormalconcessionSClist",
    components: {
      Form,
      Row,
      Col,
      Button,
      Header,
      Form,
      Cell,
      Icon,
      Field,
      NumberKeyboard,
      Dialog,
      Toast,
      NoticeBar,
      Row,
      Tag,
      popup,
      DatetimePicker,
      ImagePreview,
      CellGroup,
      Uploader,
      Col,
      Calendar,
      Cascader,
      Picker,
      RadioGroup,
      Radio,
      Divider,
      Stepper,
      VTable,
      AddressList,
      Checkbox,
      CheckboxGroup,
      tab,
      tabs,
    },
    data() {
      return {
        form: [],
        itemsOne: [],
        itemsTwo: [],
        shiftMap:{},
        preCheck:false,
        item:null
      };
    },
    created: function () {
      //获取当前系统登录用户
      this.user = JSON.parse(storage.get("user"));
      this.user.userId = this.user.userName;
      this.getList();
     //alert(JSON.stringify(api.pageParam.item));
      this.item=api.pageParam.item
      this.$ac.addEventListener({
        name: 'ab-sc'
    }, (ret, err)=> {
    
      this.getList()
        
    });
      
    },
    mounted() {},
  
    methods: {
      async getAllShift(fid){
      
      try {
          let res = await _httpClient.get(
              _httpClient.getApiPrefix() +
              "/ProductionShift/GetList?FactoryID=" +
              fid
          );
          
          if (res.HttpCode === "200") {
            for(let i =0;i<res.Data.length;i++){
              this.$set(this.shiftMap,res.Data[i].PShiftID,res.Data[i].PShiftName)
            }
          }
        
      } catch (e) {
          Toast.fail(JSON.stringify(e));
      }
},
      
      async getList() {
        let _this = this;
        Toast.loading({
          mask: true,
          forbidClick: true,
          duration: 0,
          message: "Loading...",
        });
        try {
          let res = await _httpClientApisie.get(
            _httpClientApisie.getApiPrefix() +
              "/ProductionCompromiseRequest/GetList?AbnormalTypeID=AT01&PrdChecked="+this.preCheck
          );
          Toast.clear();
          if(res.Data.length>0){
           this.getAllShift(res.Data[0].FactoryID)
        }
          if(this.preCheck){
            _this.itemsTwo=res.Data
          }else{
            _this.itemsOne = res.Data;
          }


          
        } catch (e) {
          Toast.fail(JSON.stringify(e));
        }
      },
      toAudit(id,lock=false){

        // if(!lock){
        //   if(id.POrderID!==this.item.POrderID){
        //     Toast.clear()
        //     Toast.fail("请先完成"+this.item.POrderID+"对应的审核")
        //     return
        //   }
        // }

        let _this = this;
        this.$ac.openWin({
          name: "abnormalconcessionAduit",
          url: "./tightenup-abnormalconcessionAduit.html",
          pageParam: {
            id: id.Id,
            type:"01",
            lock:lock,
            item:_this.item
          },
          reload: true,
        });
        
      },
      tabChange(name, title) {
        this.preCheck=!this.preCheck
        if (!this.preCheck) {
          this.itemsOne = [];
          //查询未审核信息
        } else if (name == 1) {
          //查询已审核信息
          this.itemsTwo = [];
        }
        this.getList()
      },
    },
  };
  </script>
    
  <style>
  body {
    background-color: white;
  }
  .textScroll {
    display: inline-block;
    position: fixed;
    top: 6rem;
    bottom: -10px;
    overflow: scroll;
    right: 0;
    width: 100%;
    margin-bottom: 4.7rem;
    z-index: 1;
  }
  .textScroll2 {
    display: inline-block;
    position: fixed;
    top: 6rem;
    bottom: -10px;
    overflow: scroll;
    right: 0;
    width: 100%;
    margin-bottom: 4.7rem;
    z-index: 1;
  }
  </style>
    